<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饼状图</title>
</head>
<body>
    <!-- SVG -->
    <h1>SVG</h1>
    <div class="svgBox">
    </div>
    <script src="../node_modules/d3/dist/d3.js" charset="utf-8"></script>
    <script type="text/javascript">
        // 准备画布
        let boxWidth = 400;     // 画布宽
        let boxHeight = 400;    // 画布高
        let svg = d3.select('.svgBox')    // 选择文档中的div.svgBox元素
            .append('svg')      // 添加一个svg元素
            .attr('width', boxWidth)    // 设置宽度
            .attr('height', boxHeight)    // 设置高度
            .style('background-color', '#eee')
            .style('border', '1px solid black');

        let dataSet = [23, 6, 45, 22, 92, 54, 68];

        // 数据转换
        let pie = d3.pie();
        let pieData = pie(dataSet);
        // console.log(pieData);

        // 弧生成器: 因为饼图的每一部分都是一段弧
        const innerRadius = 150; // 外半径
        const outerRadius = 50; // 内半径，为0则中间没有空白

        // 此时，arc 可以当做一个函数使用，把 pieData 作为参数传入，即可得到路径值。
        let arc = d3.arc() // 弧生成器
            .innerRadius(innerRadius)
            .outerRadius(outerRadius);

        let arcs = svg.selectAll("g")
            .data(pieData)
            .enter()
            .append("g")
            // 变换中心
            .attr("transform",`translate(${boxWidth/2}, ${boxWidth/2})`);

        let color = d3.scaleOrdinal(d3.schemeCategory10);   //有十种颜色的颜色比例尺

        // 画路径
        arcs.append("path")
            // 填充
            .attr("fill",function(d,i){
                return color(i);
            })
            // 路径
            .attr("d",function(d){
                return arc(d);   //调用弧生成器，得到路径值
            });

        // 然后在每一个弧线中心添加文本。
        arcs.append("text")
            .attr("transform",function(d){
                // arc.centroid(d) 能算出弧线的中心。
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor","middle")
            .text(function(d){
                return d.data;
            });
    </script>
</body>
</html>